<!DOCTYPE html>
<html>

<head>
  <title>sub</title>
  <script src="Tunnel.js"></script>
</head>

<body>
  <div id="msg">
    <div><input type="text" id="input"><button onclick="send()">SEND</button></div>
    <span>msg:</span>
  </div>
  <script>
    const searchObj = {};
    location.search.split(/\?|\&/g).filter(v => v).forEach(v => {
      const [key, value] = v.split('=');
      searchObj[decodeURIComponent(key)] = decodeURIComponent(value)
    });

    const tunnel = new Tunnel({
      signal: searchObj.signal,
      origin: searchObj.from,
      window: window.parent,
    })
    tunnel.on('main', (data) => {
      const msgItem = document.createElement('p');
      msgItem.innerHTML = data
      document.getElementById('msg').append(msgItem)
    })
    function send() {
      tunnel.send('sub', document.getElementById('input').value)
    }

  </script>

</body>

</html>